<template>
  <div class="container">
    <h3 class="logo">
      <span class="name">{{ siteName }}</span>
    </h3>
    <div class="brand">欢迎光临
      <br>{{ description }}
    </div>
    <ul class="site-nav site-navbar">
      <li class="menu-item">
        <router-link :to="{ name: 'Index' }">
          <i class="fa fa-home"></i> 首页
        </router-link>
      </li>
      <li v-for="item in categoryList" class="menu-item">
        <router-link :to="{ name: 'Category', params:{categoryId: item.id} }">
          <i class="fa fa-file-text-o"></i> {{ item.name }}
        </router-link>
      </li>
      <li class="menu-item">
        <router-link :to="{ name: 'About' }">
          <i class="fa fa-file-text-o"></i> 关于本站
        </router-link>
      </li>
    </ul>
  </div>
</template>

<script>
  import {getList} from '../api/category'
  import {getOptionsName, getOptionsDesc} from "../api/options";

  export default {
    name: "my-header",
    data() {
      return {
        categoryList: [],
        description: '',
        siteName: ''
      }
    },
    created() {
      this.getSiteName()
      this.getSiteDesc()
      this.getCategoryList()
    }, methods: {
      getCategoryList() {
        getList().then(res => {
          this.categoryList = res.data
        })
      },
      getSiteDesc() {
        getOptionsDesc().then(res => {
          this.description = res.data
        })
      },
      getSiteName() {
        getOptionsName().then(res => {
          this.siteName = res.data
        })
      }
    }
  }
</script>

<style scoped>

</style>
